<!-- 我的客户 -->
<template>
    <view>
        <status-bar title='我的客户' :goHome='fromShare'></status-bar>
        <view class="top p-left50 p-right50 white" :style="{backgroundImage:'url(' + imgUrl + 'Uploads/private/mc_bg.png' + ')'}">
            <view class="d-flex j-sb">
                <view class="p-top30">
                    <view class="size32 bold m-bot10">所有客户(位)</view>
                    <view class="size40 bold800">{{ pageData.all_guest || 0 }}</view>
                </view>
                <view class="d-flex">
                    <image class="m-top30" :src="imgUrl + 'Uploads/private/code_white.png'" mode="widthFix" style="width: 40rpx;"
                        @click="toUrl('/privatePage/single/codeCard')"></image>
                    <view class="climate m-left40 bold text-center">
                        <view class="size26">{{ pageData.chineseCalendar.term }}</view>
                        <view class="size26">{{ pageData.chineseCalendar.info }}</view>
                    </view>
                </view>
            </view>
            <view class="d-flex m-top30">
                <view>
                    <view class="size28 m-bot10">今日新增(位)</view>
                    <view class="size34 bold800">{{ pageData.today_new || 0 }}</view>
                </view>
                <view class="m-left80">
                    <view class="size28 m-bot10">今日活跃(位)</view>
                    <view class="size34 bold800">{{ pageData.today_active || 0 }}</view>
                </view>
            </view>
        </view>
        <view class="d-flex j-sb a-center p-right30">
            <u-tabs :list="tabList" :lineColor="color" lineWidth="32" @click="tabClick"
                itemStyle="height: 50px;" :inactiveStyle="{color:'#777',fontSize:'32rpx',transform:'scale(1)'}"
                :activeStyle="{color:'#444',fontSize:'32rpx',fontWeight:'bold',transform:'scale(1.05)'}"></u-tabs>
            <text class="iconfont icon-shaixuan color_44" @click="showPopup = true"></text>
        </view>
        <view class="p-left30 p-right30 p-bot30" v-if="pageData.members">
            <view class="cust-item p-top30 p-bot30 d-flex j-sb a-center" v-for="(item,index) in pageData.members" :key="index"
                @click="toUrl('/privatePage/client/detail?guest_id=' + item.v_id)">
                <view class="d-flex flex-1">
                    <u-avatar :src="$imgUrls(item.v_headimg)" size="40"></u-avatar>
                    <view class="m-left18">
                        <view class="size30 color_11 m-bot10">{{ item.v_name }}</view>
                        <view class="h6 color_44">{{ item.v_tel.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2") }}</view>
                    </view>
                    <view class="m-left18 flex-1">
                        <view class="m-bot10 ellipsis" v-if="item.tags">
                            <text class="label white" v-for="(itm,idx) in item.tags" :key="idx" :style="{background: itm.color}">{{ itm.name }}</text>
                        </view>
                        <view class="ellipsis" v-if="item.group_name">
                            <text class="label self">{{ item.group_name }}</text>
                        </view>
                    </view>
                </view>
                <view class="text-right" v-if="type == 1">
                    <view class="h7 color_66 m-bot10">活跃值</view>
                    <view class="size30 color_FF7 bold800">{{ item.browse_count || 0 }}</view>
                </view>
                <view class="text-right" v-if="type == 2">
                    <view class="h7 color_66 m-bot10">订单量</view>
                    <view class="size30 color_FF7 bold800">{{ item.order_count || 0 }}</view>
                </view>
                <view class="text-right" v-if="type == 3">
                    <view class="h7 color_66 m-bot10">订单金额</view>
                    <view class="size30 color_FF7 bold800">{{ item.total_amount || 0 }}</view>
                </view>
                <view class="text-right" v-if="type == 4">
                    <view class="h7 color_66 m-bot10">注册时间</view>
                    <view class="h6 color_44">{{ item.v_addtime }}</view>
                </view>
                <view class="text-right" v-if="type == 5">
                    <view class="h7 color_66 m-bot10">生日</view>
                    <view class="h6 color_44">{{ item.v_barithday || '未设置' }}</view>
                </view>
            </view>
        </view>
        <empty v-else cat='3' msg='您还没有相关的客户'></empty>
        <!-- 筛选弹窗 -->
        <u-popup :show="showPopup" mode="right" closeable @close="showPopup = false" :customStyle="{top: totalHeight+'px'}"
            :overlayStyle="{top: totalHeight+'px'}">
            <view class="filterList padding30 d-flex f-column j-sb" :style="{'--total-height': totalHeight+'px' }">
                <view class="cont">
                    <view class="m-bot40">
                        <text class="iconfont icon-shaixuan color_44"></text>
                        <text class="size32 color_11 m-left10">筛选</text>
                    </view>
                    <view class="m-bot20 p-left30" v-if="tags.length">
                        <view class="title">用户标签</view>
                        <view class="d-flex f-wrap">
                            <view class="option ellipsis" :class="{'active': item.checked}" v-for="(item,index) in tags" :key="index"
                                @click="handleCheck(item)">{{ item.name }}</view>
                        </view>
                    </view>
                    <view class="m-bot20 p-left30" v-if="groups.length">
                        <view class="title">个性分类</view>
                        <view class="d-flex f-wrap">
                            <view class="option ellipsis" :class="{'active': item.checked}" v-for="(item,index) in groups" :key="index"
                                @click="handleCheck(item)">{{ item.name }}</view>
                        </view>
                    </view>
                    <view class="m-bot40 p-left30">
                        <view class="title">注册时间</view>
                        <view class="p-top12 p-bot12 d-flex h6 bor_307 bor_radius_30">
                            <picker mode="date" :value="startTime" @change="getDate($event, 'start')" class="flex-1">
			                    <view class="color_77 text-right">{{startTime ? startTime : '开始时间'}}</view>
		                    </picker>
                            <text class="color_22 m-left20 m-right20">至</text>
                            <picker mode="date" :value="endTime" @change="getDate($event, 'end')" class="flex-1">
			                    <view class="color_77 text-left">{{endTime ? endTime : '结束时间'}}</view>
		                    </picker>
                        </view>
                    </view>
                    <view class="m-bot40 p-left30">
                        <view class="title">活跃值</view>
                        <view class="d-flex j-sb a-center">
                            <u-input :value="value1.start_time" type="number" shape="circle" fontSize="12" color="#777" inputAlign="center" :customStyle="inputStyle"
                                @change="handleChange($event, 1, 'start_time')" @blur="handleBlur(1)"></u-input>
                            <text class="color_22 m-left50 m-right50">至</text>
                            <u-input :value="value1.end_time" type="number" shape="circle" fontSize="12" color="#777" inputAlign="center" :customStyle="inputStyle"
                                @change="handleChange($event, 1, 'end_time')" @blur="handleBlur(1)"></u-input>
                        </view>
                        <view v-if="pageData.activeVal">
                            <text class="h6 color_44 m-right20 m-top20">历史活跃值:</text>
                            <text class="old m-right20 m-top20" :class="{'active': value1.start_time == item.start_time && value1.end_time == item.end_time}" 
                                v-for="(item,index) in pageData.activeVal" :key="index" @click="handleSelect(item, 1)">{{ item.text }}</text>
                        </view>
                    </view>
                    <view class="m-bot40 p-left30">
                        <view class="title">订单量</view>
                        <view class="d-flex j-sb a-center">
                            <u-input :value="value2.start_time" type="number" shape="circle" fontSize="12" color="#777" inputAlign="center" :customStyle="inputStyle"
                                @change="handleChange($event, 2, 'start_time')" @blur="handleBlur(2)"></u-input>
                            <text class="color_22 m-left50 m-right50">至</text>
                            <u-input :value="value2.end_time" type="number" shape="circle" fontSize="12" color="#777" inputAlign="center" :customStyle="inputStyle"
                                @change="handleChange($event, 2, 'end_time')" @blur="handleBlur(2)"></u-input>
                        </view>
                        <view v-if="pageData.orderVal">
                            <text class="h6 color_44 m-right20 m-top20">历史单量:</text>
                            <text class="old m-right20 m-top20" :class="{'active': value2.start_time == item.start_time && value2.end_time == item.end_time}" 
                                v-for="(item,index) in pageData.orderVal" :key="index" @click="handleSelect(item, 2)">{{ item.text }}</text>
                        </view>
                    </view>
                    <view class="m-bot40 p-left30">
                        <view class="title">订单金额</view>
                        <view class="d-flex j-sb a-center">
                            <u-input :value="value3.start_time" type="number" shape="circle" fontSize="12" color="#777" inputAlign="center" :customStyle="inputStyle"
                                @change="handleChange($event, 3, 'start_time')" @blur="handleBlur(3)"></u-input>
                            <text class="color_22 m-left50 m-right50">至</text>
                            <u-input :value="value3.end_time" type="number" shape="circle" fontSize="12" color="#777" inputAlign="center" :customStyle="inputStyle"
                                @change="handleChange($event, 3, 'end_time')" @blur="handleBlur(3)"></u-input>
                        </view>
                        <view v-if="pageData.orderAmount">
                            <text class="h6 color_44 m-right20 m-top20">历史金额:</text>
                            <text class="old m-right20 m-top20" :class="{'active': value3.start_time == item.start_time && value3.end_time == item.end_time}" 
                                v-for="(item,index) in pageData.orderAmount" :key="index" @click="handleSelect(item, 3)">{{ item.text }}</text>
                        </view>
                    </view>
                </view>
                <view class="d-flex j-sb p-top30">
                    <view class="btn" @click="handleReset">重置</view>
                    <view class="btn" @click="handleFilter">筛选</view>
                </view>
            </view>
		</u-popup>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data(){
        // 格式化时间戳
        const currentDate = uni.$u.timeFormat(Number(new Date()), 'yyyy-mm-dd')
        return {
            fromShare: 0,
            imgUrl: this.imgUrl,
            tabList: [
                { name: '活跃值', type: '1' },
                { name: '单量', type: '2' },
                { name: '金额', type: '3' },
                { name: '新加入', type: '4' },
                { name: '生日', type: '5' }
            ],
            showPopup: false,
            startTime: '', // 注册时间
            endTime: '',
            inputStyle: {
                'border-color': '#3071FF !important',
                'border-width': '1px !important',
                padding: '2rpx 18rpx'
            },
            type: 1,
            pageData: '',
            tags: [],
            groups: [],
            value1: { // 活跃值
                start_time: '',
                end_time: ''
            },
            value2: { // 订单量
                start_time: '',
                end_time: ''
            },
            value3: { // 订单金额
                start_time: '',
                end_time: ''
            }
        }
    },
    computed: {
        ...mapState(['color','totalHeight'])
    },
    onShow(){
        this.initData()
    },
    methods: {
        initData(){
            this.$showLoading('')
            this.$http.get({
                url: '/PrivateSphereApi/myGuestList',
                data: {
                    type: this.type
                }
            }).then(res=>{
                this.$hideLoading()
                if(res.code != 200) return this.$Toast(res.msg)
                this.pageData = res.data
                this.tags = this.pageData.tags || []
                this.groups = this.pageData.groups || []
                // 历史记录
                if(!this.pageData.history) return
                let keys = ['activeVal','orderVal','orderAmount']
                this.pageData.history.forEach(item=>{
                    this.pageData[keys[item.type-1]] = item.value
                })
            })
        },
        handleFilter(){
            if(this.startTime && this.endTime && new Date(this.startTime) > new Date(this.endTime)){
                return this.$Toast('注册结束时间不能小于开始时间！')
            }
            let params = {
                type: this.type
            }
            // 用户标签
            let res1 = this.tags.filter(item=>item.checked)
            if(res1.length) params.tags = res1.map(item=>item.id).toString()
            // 个性分类
            let res2 = this.groups.filter(item=>item.checked)
            if(res2.length) params.group = res2.map(item=>item.group_id).toString()
            // 注册时间
            if(this.startTime || this.endTime) params['add_time'] = this.startTime + ' - ' + this.endTime
            // 统一处理活跃值、订单量、订单金额
            let fields = ['active_time_range', 'active_order_range', 'active_money_range']
            fields.forEach((key,i)=>{
                if(this[`value${i + 1}`].start_time || this[`value${i + 1}`].end_time){
                    params[key] = this[`value${i + 1}`].start_time + ' - ' + this[`value${i + 1}`].end_time
                }
            })
            
            console.log('params', params)
            this.showPopup = false
            this.$showLoading('')

            this.$http.get({
                url: '/PrivateSphereApi/myGuestList',
                data: params
            }).then(res=>{
                this.$hideLoading()
                if(res.code != 200) return this.$Toast(res.msg)
                this.pageData = res.data
                // 历史记录
                if(!this.pageData.history) return
                let keys = ['activeVal','orderVal','orderAmount']
                this.pageData.history.forEach(item=>{
                    this.pageData[keys[item.type-1]] = item.value
                })
            })
        },
        tabClick({type}){
            console.log(type)
            this.type = type
            this.initData()
        },
        handleCheck(item){
            this.$set(item, 'checked', !item.checked)
        },
        handleSelect(item, num){
            if(this[`value${num}`].start_time == item.start_time && this[`value${num}`].end_time == item.end_time){
                // 取选
                this[`value${num}`] = {
                    start_time: '',
                    end_time: ''
                }
                return
            }
            this[`value${num}`] = JSON.parse(JSON.stringify(item))
        },
        handleChange(val, num, key){ // num决定value几，key决定始末
            this[`value${num}`][key] = val
        },
        handleBlur(num){
            let a = this[`value${num}`]['start_time'] // 下限
            let b = this[`value${num}`]['end_time'] // 上限
            if(a == '' || b == '') return 
            if(parseFloat(a) > parseFloat(b)) this[`value${num}`] = { start_time: b, end_time: a }
        },
        handleReset(){
            this.tags.forEach(item=>{
                item.checked = false
            })
            this.groups.forEach(item=>{
                item.checked = false
            })
            this.startTime = ''
            this.endTime = ''
            this.value1 = { start_time: '', end_time: '' }
            this.value2 = { start_time: '', end_time: '' }
            this.value3 = { start_time: '', end_time: '' }
            this.initData()
            this.showPopup = false
        },
        getDate(e, type){
            let date = e.detail.value
            if(type == 'start'){
                this.startTime = date
            } else if(type == 'end'){
                this.endTime = date
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.top {
    height: 280rpx;
    background-repeat: no-repeat;
    background-size: 100% auto;
    .climate {
        height: 90rpx;
        background: #4FA9FF; 
        padding: 12rpx 6rpx;        
        border-radius: 0rpx 0rpx 8rpx 8rpx;
    }
}
.cust-item {
    border-bottom: 1rpx solid #d9d9d9;
    .label {
        display: inline-block;
        padding: 0 10rpx;
        height: 34rpx;
        line-height: 34rpx;
        border-radius: 6rpx;
        font-size: 20rpx;
        margin-right: 10rpx;
        &.self {
            background: #FF6631;
            color: #fff;
        }
    }
}
.filterList {
    width: 620rpx;
    height: calc(100vh - var(--total-height));
    .cont {
        overflow-x: hidden;
        overflow-y: auto;
    }
    .title {
        font-size: 28rpx;
        color: #444;
        font-weight: bold;
        margin-bottom: 20rpx;
    }
    .option {
        width: 160rpx;
        line-height: 50rpx;
        border-radius: 50rpx;
        text-align: center;
        background: #fff;    
        border: 1px solid #3071FF;
        font-size: 24rpx;      
        color: #3071FF;
        padding: 0 10rpx;
        margin: 0 24rpx 20rpx 0;
        &:nth-child(3n){
            margin-right: 0;
        }
        &.active {
            background: #3071FF;
            color: #fff;
        }
    }
    .old {
        display: inline-block;
        border-radius: 20rpx;
        background: #fff;
        border: 1px solid #3071FF;
        font-size: 20rpx;
        color: #3071FF;
        padding: 4rpx 12rpx;
        &.active {
            background: #3071FF;
            color: #fff;
        }
    }
    .btn {
        width: 260rpx;
        line-height: 64rpx;
        border-radius: 32rpx;
        text-align: center;
        font-size: 30rpx;
        &:first-child {
            background: #F3F3F3;
            border: 1px solid #C7C7C7;    
            color: #848383;
        }
        &:last-child {      
            background: #3071FF;
            color: #fff;
        }
    }
}
.bor_307 {
    border: 1px solid #3071FF;
}
</style>